<template>
  <div class="tag-group my-2 flex flex-wrap gap-4 items-center">
    <el-tag v-for="(item, index) in items" :key="item.label + index" class="mx-1" :type="item.type" effect="light">
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { TagProps } from 'element-plus'

interface TagsItem {
  label: string
  type: TagProps['type']
}

const items = ref<TagsItem[]>([
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "info", label: "中国政府网" },
  { type: "success", label: "百度一下" },
  { type: "info", label: "网易云" },
  { type: "danger", label: "飞书" },
  { type: "warning", label: "阿里云" },
  { type: "warning", label: "阿里云" },
]);
</script>
